<template>
	<header>
		<div class="search-return" @click='goBack'>
			<i class="iconfont icon-fanhui"></i>
		</div>
		<div class="search-main">
			<i class="iconfont icon-fangdajing"></i>
			<form action="" onsubmit="return false" @keyup.enter='goSearchList'>
				<input type="search" placeholder="搜索你喜欢的产品..." v-model="searchVal">
			</form>
		</div>
		<div class="search-btn" @click='goSearchList'>搜索</div>
	</header>
</template>

<script>
	export default{
		data(){
			return {
				searchVal:this.$route.query.key || '',
				searchArr:[]
			}
		},
		methods:{
			goBack(){
				this.$router.back();
			},
			goSearchList(){
				
				
				// 如果搜索的关键字是没有的,那就直接返回return
				if( !this.searchVal ) return;
				
				// 判断之前有没有搜索的本地存储
				if(!localStorage.getItem('searchList')){
					// 如果记录中没有则添加
				    localStorage.setItem('searchList','[]');
				}else{
				this.searchArr = JSON.parse(localStorage.getItem('searchList'));
				}
				
				// 增加数据
				this.searchArr.unshift(this.searchVal);
				
				// ES6去重
				let newArr = new Set(this.searchArr);
				// console.log(new Set(this.searchArr))
				// 给本地存储赋值
				localStorage.setItem('searchList',JSON.stringify(Array.from(newArr)));
				 
				 // 路径如果没有变化,不跳转页面
				 if(this.searchVal === this.$route.query.key) return;
				// 跳转页面
				if(this.searchVal)
				
				this.$router.push({
					name:'list',
					query:{
						key:this.searchVal
					}
				})
			}
		}
	}
</script>

<style scoped>
	header{
		display: flex;
		justify-content:space-between;
		align-items: center;
		width: 100%;
		height: 1.173333rem;
		color: #fff;
		background-color: #b0352f;
	}
	.search-return,.search-btn{
		padding:0 0.266666rem;
	}
	.search-return i {
		font-size: 0.533333rem;
	}
	.search-main{
		display: flex;
		align-items: center;
		width: 6.933333rem;
		height: 0.8rem;
		border-radius: 12px;
		background-color: #FFFFFF;
	}
	.search-main i{
		padding: 0 0.16rem;
		color: #666666;
	}
	.search-main form{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	.search-main form input{
		width: 100%;
	}
	.search-btn{
		font-size: 0.426667rem;
	}
</style>